.page-home {
  position: relative;
  height: 100vh;
  .swiper-point {
    position: absolute;
    bottom: 400rpx;
    right: 40rpx;
    z-index: 3;
    display: flex;
    .point {
      margin-right: 8rpx;
      width: 30rpx;
      height: 10rpx;
      background: #ffffff8b;
      transform: skewX(-30deg);
      &.point-active {
        background: #fff;
      }
    }
  }
  .home-swiper {
    height: 1200rpx;
    position: relative;
    .swiper-item {
      width: 100%;
      height: 100%;
      .home-banner {
        width: 100%;
        height: 100%;
        background: #eee;
        color: #181818;
        line-height: 400rpx;
        text-align: center;
        position: relative;
        .banner-text {
          position: absolute;
          width: 412rpx;
          height: 269rpx;
          left: 58rpx;
          top: 196rpx;
        }
        .banner-img {
          width: 100%;
          height: 100%;
        }
        .banner-mask {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          width: 100;
          background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 30%, rgba(255, 255, 255, 0) 80%, #fff 100%);
        }
      }
    }
  }
  .btns {
    position: absolute;
    bottom: 42rpx;
    left: 40rpx;
    right: 40rpx;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    .btn {
      width: 320rpx;
      height: 320rpx;
      border-radius: 42rpx;
      overflow: hidden;
    }
    .btn-left {
      box-shadow: 0rpx 0 80rpx 20rpx #4dc4ff99;
    }
    .btn-right {
      box-shadow: 0rpx 0 80rpx 20rpx #bbff3399;
    }
  }
}
